import React, { Component, useState } from "react";
import styled from "styled-components";
import { AddTodo } from "../components/AddTodo";
import { Todo } from "../types";
import TodoFilter from "../components/TodoFilter";
import TodoList from "../components/TodoList";

export default function Pages() {
  const Title = styled.div`
    font-size: 20px;
    color: red;
  `;
  const content = "这里是主页面pages";

  //   初始待办事项为空
  const [todos, setTodos] = useState<Todo[]>([]);
  const [filter, setFilter] = useState("all");

  const addtodo = (text: string) => {
    const newTodoItem = {
      id: Date.now(),
      text,
      completed: false,
    };
    setTodos([...todos, newTodoItem]);
  };
  //
  const deleteTodo = (id: number) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };
  const toggleTodo = (id: number) => {
    setTodos(
      todos.map((todo) => {
        if (todo.id === id) {
          todo.completed = !todo.completed;
        }
        return todo;
      })
    );
  };
  const getFilterTodo = () => {
    switch (filter) {
      case "completed":
        return todos.filter((todo) => todo.completed);
      case "active":
        return todos.filter((todo) => !todo.completed);
      default:
        return todos;
    }
  };
  return (
    <div className="Pages">
      <Title>{content}</Title>
      <AddTodo addTodo={addtodo}></AddTodo>
      <TodoList
        todos={getFilterTodo()}
        deleteTodo={deleteTodo}
        toggleTodo={toggleTodo}
      ></TodoList>
      <TodoFilter setFilter={setFilter}></TodoFilter>
    </div>
  );
}
